﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="angular.js"></script>
    <script src="angular.min.js"></script>
    <script src="controller.js"></script>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

            table tr:nth-child(odd) {
                background-color: #ff6a00;
            }

            table tr:nth-child(even) {
                background-color: bisque;
            }
    </style>
</head>
<body ng-app="MyApp">
    <div ng-controller="customersCtrl">
        <table>
            <tr ng-repeat="x in names | orderBy:'Country'">
                <td>{{$index+1}}</td>
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>

            </tr>


        </table>
        <div ng-controller="customersCtrl">
            <table>
                <tr ng-repeat="x in names | orderBy:'Country'">
                    <td>{{$index+1}}</td>
                    <td ng-if="$odd" style="background-color: #808080">{{x.Name}}</td>
                    <td ng-if="$even" style="background-color: red">{{x.Name}}</td>
                    <td ng-if="$odd" style="background-color: #808080">{{x.Country}}</td>
                    <td ng-if="$even" style="background-color: red">{{x.Country}}</td>
                </tr>


            </table>
        </div>
        <script>
            var app = angular.module("MyApp", []);

            function customersCtrl($scope) {
                $scope.names = [{ Name: "222", Country: "1121" }, { Name: "222", Country: "1011" }, { Name: "222", Country: "111" }, { Name: "222", Country: "111" }];
            }
        </script>
</body>
</html>
